<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <div>
            <el-form
                    :rules="loginRules"
                    ref="form" :model="form" label-width="80px">

                <el-form-item label="id" prop="id" disabled="true">
                    <el-input v-model="form.id" :disabled="true" placeholder=""></el-input>
                </el-form-item>

                <el-form-item label="name" prop="name" disabled="false">
                    <el-input v-model="form.name" :disabled="false" placeholder=""></el-input>
                </el-form-item>

                <el-form-item label="absolutPath" prop="absolutPath" disabled="false">
                    <template v-if="!(form.absolutPath)">
                        <div>
                            <el-button @click="()=>{$refs['fileInput'].click();}">上传/对着弹出框直接粘贴</el-button>
                            <input type="file" ref="fileInput" style="display:none"/>
                        </div>

                    </template>
                    <!--                    预览-->
                    <template v-else>
                        <div>
                            <el-image :src="form.absolutPath"></el-image>
                        </div>
                    </template>

                </el-form-item>


            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="()=>{
   submit()
    }">确 定</el-button>
  </span>
    </el-dialog>

</template>
<script>
    export default {
        data() {
            return {
                title: "管理",
                dialogVisible: false,
                form: {id: "", absolutPath: "", orgId: "", name: ""},
                loginRules: {
                    id: [{required: false, trigger: 'blur', message: "id不能为空"}],
                    absolutPath: [{required: true, trigger: 'blur', message: "absolutPath不能为空"}],
                    name: [{required: true, trigger: 'name', message: "name不能为空"}],
                },
            }
        },
        methods: {
            handleClose() {
                this.$data.dialogVisible = false;
            },
            init(_data) {
                if (_data && _data.id) {
                    this.title = "修改"
                } else {
                    this.title = "添加"
                }
                this.dialogVisible = true
                this.form = _data ? _data : {id: "", absolutPath: "", orgId: "", name: ""}


                var self = this;

                this.$nextTick(() => {
                    setTimeout(() => {
                        $(this.$refs['fileInput']).change(async e => {
                            var file = e.currentTarget.files[0]
                            var fileName = file.name
                            this.$data.form.name = fileName
                            var result = await this.ajaxFileLoad(file)
                            if (result.code == 0) {
                                this.$data.form.absolutPath = result.msg
                            }
                            e.value = null
                            self.$forceUpdate();
                        })
                    }, 100)
                })


                const  parseImageFun=async (event) => {
                    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                    for (var i = 0; i < items.length; i++) {
                        var item = items[i];
                        if (item.type.indexOf("image") != -1) {
                            var file = item.getAsFile();
                            console.log(file);
                            var fileName = file.name+""+new Date().getTime()
                            self.$data.form.name = fileName+""+new Date().getTime()
                            var result = await this.ajaxFileLoad(file,fileName)
                            if (result.code == 0) {
                                self.$data.form.absolutPath = result.msg
                                console.log(result.msg)
                            }
                            event.value = null
                            self.$forceUpdate();
                        }
                    }
                }
                $(document).unbind("parse",parseImageFun)
                document.onpaste= parseImageFun
            },
            async ajaxFileLoad(file,fileName) {
                var formData = new FormData();
                formData.append("file", file)
                return axios.post(`/springboot6379/upload/image?fileName=${fileName||''}`, formData, {
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then(res => res.data)

            },
            async submit() {
                this.$refs['form'].validate(async (isyes) => {
                    if (isyes) {
                        var _params = this.form
                        console.log("[get]  /imageList/add")
                        console.log('参数', JSON.stringify(_params))
                        var url = this.form.id ? '/springboot6379/imageList/update' : '/springboot6379/imageList/add'
                        var result = await axios.post(url, _params).then(res => res.data)
                        console.log("结果", result)
                        this.dialogVisible = false;
                        this.$emit('refresh')
                    }
                })
            }
        }
    }
</script>




